<template>
  <div class="warning-trend" ref="container"></div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { map, max, min } from "lodash";
import useEcharts from "../../utils/useCharts";

const { container, echarts, setOption } = useEcharts();


const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
});
const echartData = ref({});

const processEchartData = () => {
  const cities = [];
  const thermalPowerValues = [];
  const pvPowerValues = [];
  const windPowerValues = [];
  const nuclearPowerValues = [];

  // 提取城市名称和电力类型数据
  props.tableData.forEach(item => {
    const cityName = item.cityName;
    const thermalPower = item.thermalPower;
    const pvPower = item.pvPower;
    const windPower = item.windPower;
    const nuclearPower = item.nuclearPower;

    cities.push(cityName);
    thermalPowerValues.push(thermalPower);
    pvPowerValues.push(pvPower);
    windPowerValues.push(windPower);
    nuclearPowerValues.push(nuclearPower);

    // 调试信息
    console.log(`Processing item: city=${cityName}, thermalPower=${thermalPower}, pvPower=${pvPower}, windPower=${windPower}, nuclearPower=${nuclearPower}`);
  });

  // 构建 ECharts 数据格式
  const seriesData = [
    { name: '火电', type: 'bar', data: thermalPowerValues },
    { name: '光电', type: 'bar', data: pvPowerValues },
    { name: '水电', type: 'bar', data: windPowerValues },
    { name: '核电', type: 'bar', data: nuclearPowerValues }
  ];

  echartData.value = {
    cities: cities,
    seriesData: seriesData
  };

  // 初始化 ECharts 图表
  const options = generateOptions();
  setOption(options);
};


const generateOptions = () => {
  // const minValue = map(sources, (source) => min(source));
  // const maxValue = map(sources, (source) => max(source));

  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      right: '5%', //距离右侧
      height: 260,  //设置高度，超出翻页
      top: '1%',
      data: echartData.value.seriesData.map(series => series.name),
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: true,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: "#9292c1",
        margin: 20,
      },
      data: echartData.value.cities
    },
    yAxis: {
      type: "value",
      // show: true,
      // min: minValue,
      // max: maxValue,
    },
    series: echartData.value.seriesData
    // series: [
    //   {
    //     name: "光伏",
    //     type: "line",
    //     symbol: "none",
    //     smooth: true,
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //     itemStyle: {
    //       color: "#3c67fb",
    //     },
    //     data: sources[1],
    //     areaStyle: {
    //       normal: {
    //         color: new echarts.graphic.LinearGradient(
    //             0,
    //             0,
    //             0,
    //             1,
    //             [
    //               { offset: 0, color: "#476bff" },
    //               { offset: 1, color: "#fafafa" },
    //             ],
    //             false
    //         ),
    //       },
    //     },
    //   },
    //   {
    //     name: "风电",
    //     type: "line",
    //     symbol: "none",
    //     smooth: true,
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //     itemStyle: {
    //       color: "#ff7500",
    //     },
    //     data: sources[2],
    //     areaStyle: {
    //       normal: {
    //         color: new echarts.graphic.LinearGradient(
    //             0,
    //             0,
    //             0,
    //             1,
    //             [
    //               { offset: 0, color: "#ff4400" },
    //               { offset: 1, color: "#ffffff" },
    //             ],
    //             false
    //         ),
    //       },
    //     },
    //   },
    // ],
  };
};
// 监听 props.tableData 的变化
watch(
  () => props.tableData,
  (newVal) => {
    if (newVal.length > 0) {
      processEchartData();
    }
  },
  { immediate: true, deep: true } // 立即执行一次
);
onMounted(() => {
  // const sources = [
  //   [1645, 1549, 1933, 1063, 1436, 1847, 1263],
  //   [1464, 1485, 1405, 1852, 1091, 1659, 1923],
  //   [1485, 1485, 1852, 1091, 1659, 1923, 1852],
  // ];
  // const options = generateOptions(sources);
  // setOption(options);
});
</script>
<style lang="scss" scoped>
.warning-trend {
  width: 100%;
  height: 300px;
}
</style>